
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>微信用户信息</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        [v-cloak] {
            display: none;
        } .avatar-uploader .el-upload {
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
          }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-upload__input{
            display: none !important;
        }
        .avatar-table{
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->

    <!-- 主体 -->
    <div >
        <!-- 头部开始 -->

        <!-- 头部结束 -->

        <!-- 主体开始 -->
        <div style="padding: 0 20px">
            <div>
                <div style="color: #666; font-weight: bold; border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 20px; font-size: 30px;">微信用户信息</div>
            </div>

            <!-- 表格主体-->
            <div style="margin-top: 10px">
                <div style="border: 1px solid #19a97b;">
                    <div style="padding: 5px; border-bottom: 1px solid #19a97b; color: white; background-color: #19a97b;">微信用户信息表</div>
                    <div style="border: 1px solid #ccc; padding: 10px">
                        <div class="table-responsive">
                            <div class="nx-table-header" style="position: relative">
                                <div class="row">
                                    <form class="form-horizontal" style="padding-left: 20px;">
                                        <div class="form-group" style="display: flex;align-items: center;">
                                            <label class="col-sm-1 col-form-label" style="text-align:right">用户名</label>
                                            <div class="col-sm-2">
                                                <div class="input-group" style="display: inline-table;width: 100%">
                                                    <input  type="text" class="form-control" placeholder="请输入用户名" v-model="formRule.name">
                                                </div>
                                            </div>
                                            <div class="col-sm-1" style="text-align: center">
                                                <button id="submitBtn2" type="button" class="btn btn-primary" @click = "jiansuo">搜索</button>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th style="text-align: center">ID</th>
                                    <th style="text-align: center">头像</th>
                                    <th style="text-align: center">用户名</th>
                                    <th style="text-align: center">绑定人员信息</th>
                                    <th style="text-align: center">绑定人员工号</th>
                                    <th style="text-align: center">权限</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody v-for="obj in objs">
                                <tr>
                                    <td style="text-align: center">{{obj.id}}</td>
                                    <td style="text-align: center"> <img v-if="obj.avater" :src="obj.avater" class="avatar-table">
                                        <img v-else src="../img/no-avater.jpg" class="avatar-table">
                                    </td>
                                    <td style="text-align: center">{{obj.name}}</td>
                                    <td style="text-align: center">{{obj.userName}}</td>
                                    <td style="text-align: center">{{obj.code}}</td>
                                    <td style="text-align: center">{{obj.level}}</td>
                                    <td style="text-align: center">
                                        <button class="btn btn-primary btn-xs" v-if="obj.code != null" v-on:click="jiebang(obj.id)">解除绑定</button>
                                        <button class="btn btn-danger btn-xs" v-on:click="del(obj.id)">删除</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" v-bind:class="{ disabled: preActive }">
                                        <a class="page-link" href="javascript:void(0)"
                                           v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                    </li>
                                    <li class="page-item disabled">
                                        <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                    </li>
                                    <li class="page-item" v-bind:class="{ disabled: nextActive }">
                                        <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格主体结束-->
        </div>
        <!-- 主体结束 -->
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el: '#wrapper',
        data: {

            authority: [],
            permission: [],
            name: '',
            user: {},
            formRule:{},
            objs: [],
            imageUrl: '',
            avater:null,
            pageInfo: {},
            preActive: true,
            nextActive: true,
            entity: {
                sex: '男'
            }
        },
        created: function () {
            this.user = JSON.parse(localStorage.getItem('user'));
            this.loadTable(1);
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.entity.avater = '/files/download/'+res.data.id
                this.avater = res.data.id
            },
            beforeAvatarUpload(file) {
                this.entity.fileList = [];
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            jiansuo(){
                axios.post("/yonghu/page"  + "?pageNum=" + 1,this.formRule).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            loadTable(pageNum) {
                axios.post("/yonghu/page"  + "?pageNum=" + pageNum,this.formRule).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            init(o) {

                this.entity = JSON.parse(JSON.stringify(o));
                $('#mod').modal('show');
            },
            add() {

                this.entity = {sex:'男'};
                $('#mod').modal('show');
            },
            update() {
                if (this.entity.name) {
                    if (!this.entity.id) {
                        axios.post(
                            "/yonghu", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {

                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    } else {
                        axios.put(
                            "/yonghu", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {

                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }else {
                    msg('error', '用户名不能为空');
                }

            },
            chongzhi(id){
                let _this = this;
                this.$confirm('确认重置该用户密码吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.get("/yonghu/resetPassword/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '该用户密码重置为123456');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            jiebang(id){
                let _this = this;
                this.$confirm('确认解除该用户的绑定？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.get("/yonghu/jiebang/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '该用户绑定解除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            del(id) {
                let _this = this;
                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete("/yonghu/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            downModel() {
                location.href = '/yonghu/getExcelModel';
            },
            clickUpload: function (e) {
                if (this.user.level !== 1) {
                    msg('warning', '你没有权限操作');
                    e.preventDefault();
                }
            },
            
        }
    })
</script>
</body>
</html>
